let ctx;

class xView {
  padding = {left: 0, top: 0, right: 0, bottom: 0}
  x = 0;
  y = 0;
  width = 10;
  height = 10;
  radius = 0
  backgroundColor = "orange";

  shadowOffsetX = 0
  shadowOffsetY = 0
  shadowBlur = 0
  shadowColor = 'rgba(0,0,0,0.25)'

  cx = 0
  cy = 0

  constructor(x,y,width,height) {
    if (x) this.x = x
    if (y) this.y = y
    if (width) this.width = width
    if (height) this.height = height
  }

  // parent = null

  add(view) {
    view.parent = this

    const drawX = this.cx + this.padding.left
    const drawY = this.cy + this.padding.top

    view.draw(drawX, drawY);

    view.cx = this.cx + this.padding.left + view.x
    view.cy = this.cy + this.padding.top + view.y
    console.log('this.y, thispadding.top,view.y', this);
  }
}

class xRect extends xView {

  constructor(x,y,width,height) {
    super(x,y,width,height);
  }

  draw(px = 0, py = 0) {

    if (this.shadowBlur) {
      ctx.shadowOffsetX = this.shadowOffsetX
      ctx.shadowOffsetY = this.shadowOffsetY
      ctx.shadowBlur = this.shadowBlur
      ctx.shadowColor = this.shadowColor
    }

    console.log('draw', px, py, this.x, this.y, this);
    ctx.fillStyle = this.backgroundColor;
    ctx.beginPath()
    ctx.roundRect(px + this.x, py + this.y, this.width, this.height, this.radius)
    ctx.fill()
  }
}

class xCanvas extends xView {
  type = 'small' // small medium large
  constructor(id, type) {
    super();
    const canvas = document.getElementById(id);
    
    if (type === 'small') {
      canvas.width = "510";
      canvas.height = "510";
    }
    if(type === 'medium') {
      canvas.width = "1092";
      canvas.height = "510";
    }
    if(type === 'large') {
      canvas.width = "1092";
      canvas.height = "1092";
    }
    
    ctx = canvas.getContext("2d");
    console.log('ctx', ctx);
  }
}

class xText extends xView {
  width = undefined;
  align = 'left' // left center right
  textColor = 'black'
  fontSize = '36'
  fontFamily = ''
  constructor(text) {
    super();
    this.text = text;
  }

  draw(px, py) {
    // fc.load().then(ft => {
    //   document.fonts.add(ft)
    ctx.fillStyle = this.textColor
    // ctx.font = "50px dy";
    // ctx.font = "bold 50px serif";
    ctx.font = `${this.fontSize}px sss`
    ctx.textBaseline = "hanging";
    ctx.textAlign = this.align
    console.log("px", px);
    ctx.fillText(this.text, px + this.x, py + this.y, this.width);
    // })
  }
}

class xImage extends xView {
  src = "./pie.png";
  constructor(src) {
    super();
    this.image = new Image();
    this.image.src = "./pie.png";
    this.src = src;
  }

  draw(px, py) {
    this.image.onload = () => {
      ctx.drawImage(this.image, px + this.x, py + this.y);
    };
  }
}

class xCircle extends xView {
  radius = 10;

  draw(px = 0, py = 0) {
    ctx.shadowColor = "#bebebe";
    ctx.shadowOffsetX = 20;
    ctx.shadowOffsetY = 20;
    ctx.shadowBlur = 60;

    //       background: #e0e0e0;
    // box-shadow:  20px 20px 60px #bebebe,
    //              -20px -20px 60px #ffffff;

    ctx.fillStyle = this.backgroundColor;
    ctx.beginPath();
    console.log("this.x", this.x);
    console.log("this.y", this.y);
    console.log("this.radius", this.radius);
    ctx.arc(
      px + this.x + this.radius * 0.5,
      py + this.y + this.radius * 0.5,
      this.radius,
      0,
      Math.PI * 2
    );
    ctx.fill();
  }
}

function getContext() {
  return ctx
}

const Draw = {
  getContext: getContext,
  Canvas: xCanvas,
  View: xView,
  Rect: xRect,
  Circle: xCircle,
  Image: xImage,
  Text: xText,
  
};
const canvas = new Draw.Canvas('canvas', 'medium')

// const ctx = Draw.getContext()

const countDonw = new Draw.Text('距离周末还有3天')
countDonw.x = 546
countDonw.y = 416
countDonw.align = 'center'
countDonw.fontSize = 50
canvas.add(countDonw)

ctx.save()

const rect = new Draw.Rect(50,50,992,326)
rect.radius = 50
rect.padding.left = 50
rect.padding.top = 50
rect.backgroundColor = 'white'
rect.shadowBlur = 30
canvas.add(rect)

ctx.restore()

let data = ['Mon','Tue','Wed','Thu','Fri']
data.forEach((item, index) => {
  const container = new Draw.Rect(index * 178.4,0, 178.4, 230)
  container.backgroundColor = 'white'
  rect.add(container)

  const dateCon = new Draw.Rect(19,0, 140, 230)
  dateCon.backgroundColor = 'white'
  dateCon.radius = 40

  if (index == 2) {
    dateCon.backgroundColor = '#352B2B'
  }

  container.add(dateCon)

  const weekNum = new Draw.Text(item)
  weekNum.align = 'center'
  weekNum.x = 70
  weekNum.y = 49
  if (index == 2) {
    weekNum.textColor = 'white'
  }
  dateCon.add(weekNum)

  const dateNum = new Draw.Text('09')
  dateNum.align = 'center'
  dateNum.x = 70
  dateNum.y = 114
  dateNum.fontSize = 64
  if (index == 2) {
    dateNum.textColor = 'white'
  }
  dateCon.add(dateNum)

});
